<template>
  <div class="home">
    <img src="@/assets/img1.jpg" />
    <section>
      <div class="form">
        <div class="name">
          <span>
            您的姓名
            <i>*</i>：
          </span>
          <van-field v-model="form.name" placeholder="请输入" />
        </div>
        <div class="phone">
          <span>
            您的电话
            <i>*</i>：
          </span>
          <van-field maxlength="11" v-model="form.phone" type="tel" placeholder="请输入" />
        </div>
        <div class="btn">
          <van-button
            id="freeOfCharge"
            :loading="loading"
            loading-text="领取中"
            color="rgb(89,46,44)"
            icon="play"
            icon-position="right"
            @click="submit"
          >免费领取</van-button>
        </div>
        <img src="@/assets/icon01.png" class="cartoon" style="width: 1rem;" />
      </div>
    </section>
    <img src="@/assets/img3.jpg" />
    <img src="@/assets/img4.jpg" />
    <img src="@/assets/img5.jpg" />
    <img src="@/assets/img6.jpg" />
    <img src="@/assets/img7.jpg" />
    <section class="bottom">
      <div class="form">
        <div class="name">
          <span>
            您的姓名
            <i>*</i>：
          </span>
          <van-field v-model="bottomForm.name" placeholder="请输入" />
        </div>
        <div class="phone">
          <span>
            您的电话
            <i>*</i>：
          </span>
          <van-field maxlength="11" v-model="bottomForm.phone" type="tel" placeholder="请输入" />
        </div>
        <div class="btn">
          <van-button
            id="getItNow"
            :loading="bottomLoading"
            loading-text="领取中"
            color="rgb(89,46,44)"
            icon="play"
            icon-position="right"
            @click="bottomSubmit"
          >马上领取</van-button>
        </div>
        <img src="@/assets/icon02.png" class="cartoon" style="width: 1rem;" />
      </div>
      <!-- <p class="tel1">
        <a href="tel:400-009-3095">400-009-3095</a>
      </p>-->
      <!-- <p class="tel2">
        <a href="tel:400-155-2002" id="tel2">400-155-2002</a>
      </p>-->
      <a href="tel:400-155-2002" id="tel2">
        <img src="@/assets/tel.png" width="60%" class="tel-btn" />
      </a>
    </section>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      form: {
        name: '',
        phone: ''
      },
      loading: false,
      bottomForm: {
        name: '',
        phone: ''
      },
      bottomLoading: false
    }
  },
  methods: {
    submit() {
      if (this.form.name === '' || this.form.phone === '') {
        this.$toast({
          message: '请填写完整信息'
        })
      } else if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
        this.$toast({
          message: '请您输入正确的手机号'
        })
      } else {
        this.loading = true
        const params = {
          contactPerson: this.form.name,
          contactPhone: this.form.phone
        }
        this.$http
          .post('/api/v1/visit/contact/apply', params)
          .then(() => {
            this.$toast.success('领取成功')
            this.getAdvert()
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
    // 广告回调
    getAdvert() {
      const params = {
        token:
          'Pcqu3yMcnsHbaflcZQGQT2uYs1SagfuC@ulZA0LWzlh2spbLyzsThxB69ezVqUYSb',
        conversionTypes: [
          {
            logidUrl: window.location.href,
            newType: 3
          }
        ]
      }
      axios.post('/ocpcapi/api/uploadConvertData', params)
    },
    bottomSubmit() {
      if (this.bottomForm.name === '' || this.bottomForm.phone === '') {
        this.$toast({
          message: '请填写完整信息'
        })
      } else if (!/^1[3456789]\d{9}$/.test(this.bottomForm.phone)) {
        this.$toast({
          message: '请您输入正确的手机号'
        })
      } else {
        this.bottomLoading = true
        const params = {
          contactPerson: this.bottomForm.name,
          contactPhone: this.bottomForm.phone
        }
        this.$http
          .post('/api/v1/visit/contact/apply', params)
          .then(() => {
            this.$toast.success('领取成功')
            this.getAdvert()
          })
          .finally(() => {
            this.bottomLoading = false
          })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  > img {
    width: 100%;
    display: block;
  }
  section {
    background: url('../assets/img2.jpg') no-repeat center center / 100% 100%;
    padding: 0.4rem;
    .form {
      position: relative;
      top: 20px;
      background: #fff;
      border-radius: 0.1rem;
      padding: 30px;
      font-size: 24px;
      .name,
      .phone {
        span {
          color: #57322c;
          font-weight: bold;
          margin-bottom: 0.05rem;
          letter-spacing: 0.02rem;
          display: inline-block;
          i {
            color: #f00;
            position: relative;
            left: -0.08rem;
          }
        }
      }
      .phone {
        margin-top: 0.4rem;
      }
      .van-cell {
        padding: 0;
        border-bottom: 0.01rem solid #000;
        font-size: 0.14rem;
      }
      .btn {
        text-align: center;
        margin-top: 0.3rem;
        button {
          border-radius: 0.15rem;
          font-weight: bold;
          width: 1.6rem;
        }
      }
      .cartoon {
        position: absolute;
        right: -0.37rem;
        bottom: -0.1rem;
      }
    }
  }
  section.bottom {
    position: relative;
    width: 100%;
    height: 5.8rem;
    padding: 0;
    background: url('../assets/img8.jpg') no-repeat center center / 100% 100%;
    .form {
      top: 1.4rem;
      margin: 0 0.4rem;
    }
    .tel1 {
      font-size: 0.18rem;
      position: absolute;
      bottom: 0.72rem;
      left: 2.1rem;
      a {
        color: rgb(246, 213, 204);
        font-weight: bold;
      }
    }
    .tel2 {
      font-size: 0.18rem;
      position: absolute;
      bottom: 0.56rem;
      left: 2.25rem;
      a {
        color: rgb(246, 213, 204);
        font-weight: bold;
      }
    }
    .tel-btn {
      position: absolute;
      bottom: 0.6rem;
      left: 0.75rem;
    }
  }
}
</style>
